<template>

  <el-main>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="楼盘名称" prop="houseId">
        <el-select v-model="ruleForm.houseId" placeholder="请选择楼盘">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
          <el-button type="primary" @click="Submitlou">添加楼盘</el-button>
      </el-form-item>

      <el-form-item label="出租形式" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio label="整租" value="整租"></el-radio>
          <el-radio label="合租" value="合租"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否出租" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="已出租" value="已出租"></el-radio>
          <el-radio label="未出租" value="未出租"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="楼栋号" prop="name">
        <el-input v-model="ruleForm.building" style="width: 300px;"></el-input>
      </el-form-item>

      <el-form-item label="单元号" prop="unit">
        <el-input v-model="ruleForm.unit" style="width: 300px;"></el-input>
      </el-form-item>

      <el-form-item label="门牌号" prop="roomno">
        <el-input v-model="ruleForm.roomno" style="width: 300px;"></el-input>
      </el-form-item>

      <el-form-item label="户型" prop="name">
        <el-select v-model="ruleForm.roomname" placeholder="请选择几室">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
        </el-select>
        ----
        <el-select v-model="ruleForm.roomnames" placeholder="请选择几室">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="装修情况" prop="decorate">
        <el-select v-model="ruleForm.decorate" placeholder="请选择装修情况">
          <el-option label="精装" value="1"></el-option>
          <el-option label="简装" value="2"></el-option>
          <el-option label="毛坯" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="设置管家" >
        <el-select v-model="ruleForm.userid" placeholder="请选择管家">
          <el-option label="aaa" value="1"></el-option>
          <el-option label="admin" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="房产面积" prop="proportion">
        <el-input v-model="ruleForm.proportion" style="width: 300px;"></el-input>
      </el-form-item>

      <el-form-item label="租金" prop="rental">
        <el-input v-model="ruleForm.rental" style="width: 300px;"></el-input>
      </el-form-item>


      <el-form-item label="公共配套">
        <el-checkbox-group v-model="pubs" @change="handleCheckedCitiesChange2">
          <el-checkbox v-for="city in hardwareListData2" :label="city.name" :key="city.id" :value="city.id"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>



      <el-form-item label="房间配套">
        <el-checkbox-group v-model="privateFacli" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in hardwareListData" :label="city.name" :key="city.id" :value="city.id"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="房间区域图片" prop="desc">
        <el-upload
          class="upload-demo"
          action="http://localhost/dev-api/file/file/upload"
          :on-success="handleAvatarSuccess2"
          :before-remove="beforeRemove"
          multiple
          list-type="picture-card"
          :limit="1"
          :on-exceed="handleExceed"
        ><img v-if="ruleForm.img" :src="ruleForm.img" class="avatar" >
        </el-upload>
      </el-form-item>

      <el-form-item label="公共区域图片" prop="desc">
        <el-upload
          class="upload-demo"
          action="http://localhost/dev-api/file/file/upload"
          :on-success="handleAvatarSuccess2"
          :before-remove="beforeRemove"
          multiple
          list-type="picture-card"
          :limit="1"
          :on-exceed="handleExceed"
        ><img v-if="ruleForm.picture" :src="ruleForm.picture" class="avatar" >
        </el-upload>
      </el-form-item>



      <el-form-item label="房源介绍" prop="dstyle">
        <el-input type="textarea" v-model="ruleForm.dstyle"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

  </el-main>


</template>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  import {prifacilitylist,prolist,pubfacilitylist,savefensan} from "@/api/system/fangyuan";
    export default {
        name: "index",
      data() {
        return {
          ruleForm: {
            s2:'',
            s1:'',
            status:''
          },
          privateFacli:[],
          pubs:[],
          opt: [],
          options: [],
          hardwareListData: [],
          hardwareListData2: [],
          checkAll: false,
          isIndeterminate: true,
          checkAll2: false,
          isIndeterminate2: true,
          rules: {
            houseId: [
              { required: true, message: '请选择楼盘', trigger: 'change' }
            ],
            // status: [
            //   { type: 'status', required: true, message: '请选择房屋状态', trigger: 'change' }
            // ],
            // resource: [
            //   { type: 'resource', required: true, message: '请选择是否出租', trigger: 'change' }
            // ],


          }
        };
      },
      methods: {
        Submitlou(){
          this.$router.push('/loupan/addinfo');
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.ruleForm.s1=this.pubs.join(",");
              this.ruleForm.s2=this.privateFacli.join(",");
              savefensan(this.ruleForm).then(response => {

                console.log(response)
                alert('submit! 跳转房态图页面');
                this.$router.push('/fangyuan/fangtaitu/list');
              });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
         handleAvatarSuccess(res, file) {

           this.ruleForm.img = res.data.url;
        },
        handleAvatarSuccess2(res, file) {

          this.ruleForm.picture = res.data.url;
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        //获取独立配置
        getprifacilityList(){
          prifacilitylist().then(response => {
            console.log(response)
            this.hardwareListData = response.data;
          });
        },
        handleCheckedCitiesChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.hardwareListData.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.hardwareListData.length;
        },
        //获取公共配置
        getpubfacilityList(){
          pubfacilitylist().then(response => {
            console.log(response)
            this.hardwareListData2 = response.data;
          });
        },
        handleCheckedCitiesChange2(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.hardwareListData2.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.hardwareListData2.length;
        },
        //获取楼盘
        getloupan(){
          prolist().then(response => {
            console.log(response)
            this.options = response.data;
          });
        },

      },
      created() {
        this.getprifacilityList();
        this.getloupan();
        this.getpubfacilityList();

      }


    }
</script>

<style scoped>

</style>
